<template>
  <div class="page">
    <van-nav-bar title="商户列表" left-arrow @click-left="$router.go(-1)"/>
    <top-search @search="searchFunc" v-model="search.content" bgcolor="#fff"></top-search>
    
    <van-tabs v-if="$store.getters.ifAdmin" v-model="search.status" @change="searchFunc" color="#517df1" title-active-color="#517df1" title-inactive-color="#9d9d9d">
      <van-tab v-for="item in [{ label: '正常', value: 0 }, { label: '已删除', value: 1 }]" :key="item.value" :name="item.value">
        <template #title> 
          <div style="font-size: 14px; text-align: center;">{{ item.label }}</div>
        </template>
      </van-tab>
    </van-tabs>
    
    <van-list class="page-content" v-model="page.loading" :finished="page.finished" finished-text="没有更多了" @load="getList">
      <div class="list-item" v-for="(item, index) in list" :key="index">
        <div class="list-group flex-row" style="padding-top: 0.25rem; padding-bottom: 0.25rem;">
          <div class="flex-row">
            <img :src="'./img/logo.png'" style="width: 0.6rem; height: 0.6rem; border-radius: 50%;"/>
            <span class="font-black" style="font-size: 14px; margin-left: 0.28rem;">{{ item.nick || '无昵称' }}({{ item.userId }})</span>
          </div>
          <span v-if="$store.state.userInfo.roleType < 3 && !$store.getters.ifAdmin" @click="user.showBlank(item.userId)" class="font-blue" style="font-size: 14px;">修改信息</span>
        </div>
        <div class="list-group justify">
          <div class="list-row">
            <span class="label-text">用户名</span>
            <span>{{ item.userName }}</span>
          </div>
          <div class="list-row">
            <span class="label-text">手机号</span>
            <span>{{ item.phone }}</span>
          </div>
        </div>
        <div class="list-group justify">
          <div class="list-row">
            <span class="label-text">提成比例</span>
            <span>{{ item.virtualProportion || 0 }}</span>
          </div>
          <div class="list-row">
            <span class="label-text">商户数</span>
            <span>{{ item.tenantNum || 0 }}</span>
          </div>
          <div class="list-row">
            <span class="label-text">设备数</span>
            <span>{{ item.chargerNum || 0 }}</span>
          </div>
        </div>
        <div v-if="$store.getters.ifAdmin" class="list-group around" style="padding-top: 0.25rem; padding-bottom: 0.25rem; font-size: 14px;">
          <div class="list-row">
            <span class="font-blue" @click="order.showBlank(item.userId)">订单设置</span>
            <span class="font-blue" @click="user.showBlank(item.userId)">修改信息</span>
            <span v-if="search.status == 0" class="font-red" @click="deleteUser(item.userId)">删除</span>
            <span v-else class="font-green" @click="reStart(item.userId)">恢复</span>
          </div>
        </div>
      </div>
    </van-list>

    <van-popup v-model="order.show" position="bottom" :style="{ height: '100%' }">
      <div class="page">
        <van-nav-bar title="订单设置" left-arrow @click-left="order.show = false"/>
        <van-form class="page-content" :disabled="order.loading" @submit="order.submit">
          <van-field :rules="[ $check('', true), $check('请输入数字', 'number') ]" required v-model="order.detail.dayMinOrder" label="最低单数" placeholder="请输入"/>
          <van-field :rules="[ $check('', true), $check('请输入数字', 'number') ]" required v-model="order.detail.loseOrder" label="抽单间隔" placeholder="请输入"/>
          <form-datetime :rules="[ $check('', true) ]" required label="开始时间" v-model="order.detail.startTime"></form-datetime>
          <form-picker :rules="[ $check('', true) ]" required label="开关" v-model="order.detail.status" :option="[{ value: 0, label: '打开' }, { value: 1, label: '关闭' }]"></form-picker>
          <div style="margin: 1rem 16px 16px;">
            <van-button block type="info" :loading="order.loading">提交</van-button>
          </div>
        </van-form>
      </div>
    </van-popup>

    <van-popup v-model="user.show" position="bottom" :style="{ height: '100%' }">
      <add-role v-if="user.show" :userInfo="user.info" ref="addRole" @close="user.onClose"></add-role>
    </van-popup>
  </div>
</template>

<script>
import addRole from './AddRole.vue';
import deleteUser from './deleteUser';
export default {
  components: { addRole },
  mixins: [ deleteUser ],
  data() {
    return {
      search: {
        status: 0,
        content: '',
        userId: this.$store.state.userInfo.userId
      },

      page: {
        page: 1,
        size: 10,
        loading: false,
        finished: false
      },

      list: [],

      order: {
        show: false,
        detail: {},
        type: 'add',
        loading: false,
        showBlank: (userId) => {
          this.$axios.get(`/api/hideOrder/${userId}`).then((res) => {
            this.order.userId = userId;
            if (res) {
              this.order.detail = {
                dayMinOrder: res.dayMinOrder,
                loseOrder: res.loseOrder, 
                startTime: res.startTime, 
                status: res.status 
              };
              this.order.type = 'updata';
            } else {
              this.order.detail = { 
                dayMinOrder: 10, 
                loseOrder: 10,
                startTime: new Date().format('yyyy-MM-dd HH:mm:ss'), 
                status: 0 
              };
              this.order.type = 'add';
            }
            this.order.show = true;
          });
        },
        submit: () => {
          let detail = JSON.parse(JSON.stringify(this.order.detail));
          detail.userId = this.order.userId;
          this.order.loading = true;
          if (this.order.type == 'add') {
            this.$axios.post('/api/hideOrder', detail).then(() => {
              this.$toast('新增成功！');
              this.order.loading = false;
              this.order.show = false;
            }).catch(() => {
              this.order.loading = false;
            });
          } else {
            this.$axios.put('/api/hideOrder', detail).then(() => {
              this.$toast('修改成功！');
              this.order.loading = false;
              this.order.show = false;
            }).catch(() => {
              this.order.loading = false;
            });
          }
        }
      },

      user: {
        show: false,
        onClose: () => {
          this.user.show = false;
        },
        showBlank: (userId) => {
          this.$axios.get('/api/roleController/getUserRoleInfo', { 
            userId
          }).then(res => {
            this.user.show = true;
            this.$nextTick(() => {
              this.$refs.addRole.setValue(res);
            });
          });
        }
      }
    };
  },
  methods: {
    getList() {
      let sPage = JSON.parse(JSON.stringify(this.page));
      let page = sPage.page, size = sPage.size;
      this.page.loading = true;
      
      let search = JSON.parse(JSON.stringify(this.search));
      let query = { page, size, userId: search.userId, status: search.status };
      if (search.content) query.content = search.content;

      this.$axios.get('/api/roleController/ShopManagerList', query).then(res => {
        let json = res || {}; 
        let list = json.list || [];
        this.list.push( ...list );
        let finished = json.isLastPage ? true : false;
        this.page = { ...sPage, page: sPage.page + 1, loading: false, finished };
      }).catch(err => {
        this.page = { ...sPage, loading: false, finished: true };
      });
    },
    searchFunc() {
      this.page = { page: 1, size: 10, loading: false, finished: false };
      this.list = [];
      this.getList();
    },
  },
  mounted() { 
  },
};
</script>